<template>
  <div class="insurance-custom-wrap">
    <Anchor ref="insuranceAnchor" :labelList="labels">
      <div id="row-01">
        <FormPanel ref="insurInfoFormPanel" :list="insurInfoFormList" :cols="3" :labelWidth="110" :isSubmitBtn="false" @formChange="formChangeHandle" />
      </div>
      <div id="row-02">
        <FilterTable ref="table" :columns="columns" :params="fetchParams" :dataSource="insuranceList" :onColumnsChange="columns => (this.columns = columns)"> </FilterTable>
      </div>
    </Anchor>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
// import { protectRepair, queryInsuranceList } from '@/api/repair/repairReception/customer/vehicleDetails';
import moment from 'moment';
export default {
  name: 'Insurancewarranty',
  mixins: [dictionary],
  props: ['protectRepairInfo'],
  data() {
    return {
      labels: [
        { title: '保修', id: 'row-01' },
        { title: '保险', id: 'row-02' }
      ],
      fetchParams: { xhrAbort: false },
      insurInfoFormList: this.createInsurInfoFormList(),
      columns: this.createTableColumns(),
      insuranceList: []
    };
  },
  mounted() {
    this.queryInsuranceListFun(this.protectRepairInfo.VIN);
    this.protectRepairFun();
    setTimeout(() => {
      this.$refs.insuranceAnchor.REFRESH();
    }, 100);
  },
  methods: {
    createInsurInfoFormList() {
      return [
        {
          type: 'INPUT',
          label: '行驶里程',
          fieldName: 'MILEAGE',
          // placeholder: '请输入...',
          disabled: true,
          change: val => {
            this.$refs.insurInfoFormPanel.SUBMIT_FORM();
          }
          // rules: [{ required: false, message: '请输入品牌代码', trigger: 'blur' }]
        },
        {
          type: 'INPUT',
          label: '换表里程',
          fieldName: '',
          // placeholder: '请输入...',
          disabled: true
          // rules: [{ required: false, message: '请输入品牌名称', trigger: 'blur' }]
        },
        {
          type: 'INPUT',
          label: '日平均行驶里程',
          fieldName: 'DAILY_AVERAGE_MILEAGE',
          // placeholder: '请输入...',
          disabled: true
          // rules: [{ required: false, message: '请输入品牌名称', trigger: 'blur' }]
        },
        {
          type: 'DATE',
          label: '保修日期',
          fieldName: 'WRT_BEGIN_DATE',
          placeholder: '选择日期'
          // rules: [{ required: true, message: '请选择日期', trigger: 'change' }]
        },
        {
          type: 'INPUT',
          label: '保修起始里程',
          fieldName: 'WRT_BEGIN_MILEAGE',
          placeholder: '请输入...',
          disabled: true
          // rules: [{ required: false, message: '请输入品牌名称', trigger: 'blur' }]
        },
        {
          type: 'INPUT',
          label: '保修结束里程',
          fieldName: 'WRT_BEGIN_MILEAGE_TO',
          placeholder: '请输入...',
          disabled: true
          // rules: [{ required: false, message: '请输入品牌名称', trigger: 'blur' }]
        },
        {
          type: 'DATE',
          label: '首次进厂日期',
          fieldName: 'FIRST_IN_DATE',
          placeholder: '选择日期'
          // rules: [{ required: true, message: '请选择日期', trigger: 'change' }]
        },
        {
          type: 'DATE',
          label: '上次维修日期',
          fieldName: 'LAST_MAINTAIN_DATE',
          placeholder: '选择日期'
          // rules: [{ required: true, message: '请选择日期', trigger: 'change' }]
        },
        {
          type: 'INPUT',
          label: '上次维修里程',
          fieldName: 'LAST_MAINTAIN_MILEAGE',
          // placeholder: '请输入...',
          disabled: true
          // rules: [{ required: false, message: '请输入品牌名称', trigger: 'blur' }]
        },
        {
          type: 'DATE',
          label: '上次验车日期',
          fieldName: 'LAST_INSPECT_DATE',
          placeholder: '选择日期'
          // rules: [{ required: true, message: '请选择日期', trigger: 'change' }]
        },
        {
          type: 'DATE',
          label: '下次保养日期',
          fieldName: 'NEXT_MAINTAIN_DATE',
          placeholder: '选择日期'
          // rules: [{ required: true, message: '请选择日期', trigger: 'change' }]
        },
        {
          type: 'INPUT',
          label: '下次保养里程',
          fieldName: 'NEXT_MAINTAIN_MILEAGE',
          // placeholder: '请输入...',
          disabled: true
          // rules: [{ required: false, message: '请输入品牌名称', trigger: 'blur' }]
        },
        {
          type: 'DATE',
          label: '下次验车日期',
          fieldName: 'NEXT_INSPECT_DATE',
          placeholder: '选择日期'
          // rules: [{ required: true, message: '请选择日期', trigger: 'change' }]
        },
        {
          type: 'INPUT',
          label: '加装说明',
          fieldName: 'ADD_EQUIPMENT',
          // placeholder: '请输入...',
          disabled: true
          // rules: [{ required: false, message: '请输入品牌名称', trigger: 'blur' }]
        },
        {
          type: 'INPUT',
          label: '注意事项',
          fieldName: 'ATTENTION_INFO',
          // placeholder: '请输入...',
          disabled: true
          // rules: [{ required: false, message: '请输入品牌名称', trigger: 'blur' }]
        },
        {
          type: 'INPUT',
          label: '待办事项',
          fieldName: 'PREPARE_JOB',
          // placeholder: '请输入...',
          disabled: true
          // rules: [{ required: false, message: '请输入品牌名称', trigger: 'blur' }]
        },
        {
          type: 'DATE',
          label: '上次保养日期',
          fieldName: 'LAST_MAINTENANCE_DATE',
          placeholder: '选择日期'
          // rules: [{ required: true, message: '请选择日期', trigger: 'change' }]
        },
        {
          type: 'INPUT',
          label: '上次保养里程',
          fieldName: 'LAST_MAINTENANCE_MILEAGE',
          // placeholder: '请输入...',
          disabled: true
          // rules: [{ required: false, message: '请输入品牌名称', trigger: 'blur' }]
        },
        {
          type: 'DATE',
          label: '新车关怀日期',
          fieldName: 'NEW_VEHICLE_DATE',
          placeholder: '选择日期'
          // rules: [{ required: true, message: '请选择日期', trigger: 'change' }]
        },
        {
          type: 'SELECT',
          label: '是否激活',
          fieldName: 'IS_VALID',
          placeholder: '请选择',
          disabled: true,
          itemList: this.createDictList('1278'),
          rules: [{ required: false, message: '请选择是否激活', trigger: 'change' }]
        },
        {
          type: 'SELECT',
          label: '不激活原因',
          fieldName: 'NO_VALID_REASON',
          placeholder: '请选择',
          disabled: true,
          itemList: [],
          rules: [{ required: false, message: '请选择不激活原因', trigger: 'change' }]
        },
        {
          type: 'INPUT',
          label: '产品代码',
          fieldName: 'PRODUCT_CODE',
          // placeholder: '请输入...',
          disabled: true
          // rules: [{ required: false, message: '请输入品牌名称', trigger: 'blur' }]
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '险种',
          dataIndex: 'INSURANCE_TYPE_NAME',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        },
        {
          title: '保险公司',
          dataIndex: 'INSURATION_CODE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        },
        {
          title: '保险开始时间',
          dataIndex: 'INSURANCE_BEGIN_DATE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        },
        {
          title: '保险结束时间',
          dataIndex: 'INSURANCE_END_DATE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        },
        {
          title: '保单号',
          dataIndex: 'INSURANCE_BILL_NO',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        },
        {
          title: '是否续保',
          dataIndex: 'RE_INSURE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        },
        {
          title: '实际费用',
          dataIndex: 'ACTUAL_EXPENDING',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        },
        {
          title: '专员',
          dataIndex: 'COMPLETED_BY',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        },
        {
          title: '完工日期',
          dataIndex: 'COMPLETED_DATE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        },
        {
          title: '保险介绍人',
          dataIndex: 'INSURANCE_INTRO_MAN',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        },
        {
          title: '登记日期',
          dataIndex: 'RECORD_DATE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        },
        {
          title: '登记人',
          dataIndex: 'RECORDER',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        },
        {
          title: '是否续保提醒',
          dataIndex: 'IS_INSURE_REMIND',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        },
        {
          title: '投保日期',
          dataIndex: 'INSURANCE_BUY_DATE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        },
        {
          title: '是否本公司投保',
          dataIndex: 'IS_SELF_COMPANY_INSURANCE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        },
        {
          title: '是否销售订单创建',
          dataIndex: 'IS_SALE_CREATE',
          width: 170,
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        },
        {
          title: '备注',
          dataIndex: 'REMARK',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        }
      ];
    },
    formChangeHandle(val) {
      this.$emit('insuranceChangeHandle', val);
    },
    async queryInsuranceListFun(val) {
      this.fetchParams = {
        ...this.fetchParams,
        order: 'asc',
        limit: 10,
        offset: 0,
        insurance: '',
        dms_memoInfo: '',
        dmsFuncId: 35100010
      };
      const res = await queryInsuranceList(this.fetchParams, val);
      this.insuranceList = res;
    },
    protectRepairFun() {
      this.insurInfoFormList.forEach(x => {
        if (x.fieldName === 'LAST_MAINTAIN_DATE') {
          let dataFormate = moment(this.protectRepairInfo[x.fieldName]).format('YYYY-MM-DD');
          x.initialValue = dataFormate;
        } else {
          x.initialValue = this.protectRepairInfo[x.fieldName];
        }
      });
    }
  }
};
</script>

<style lang="less">
.insurance-custom-wrap {
  height: calc(100vh - 175px);
}
</style>
